<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <comment :commentList="commentList1" :pageFlag="pageFlag1"></comment>
      </el-col>
      <el-col :span="12">
        <comment :commentList="commentList2" :pageFlag="pageFlag2"></comment>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import comment from '@/components/comment'
import store from "@/store";

export default {
  name: "commentDemo",
  components:{
    comment
  },
  data() {
    return {
      commentList1:[
      ],
      commentList2:[
      ],
      pageFlag1:"pageFlag1",
      pageFlag2:"pageFlag2",
    };
  },
  created() {
    
  },
  computed:{
    random(){
      return store.state.comment.random;
    }
  },
  watch:{
    random(){
      if(store.state.comment.pageFlag==this.pageFlag1){
        this.commentList1.push(store.state.comment.newComment);
      }
      if(store.state.comment.pageFlag==this.pageFlag2){
        this.commentList2.push(store.state.comment.newComment);
      }
    }
  },
  methods: {
    
  }
};
</script>